<template>
	<view class="box">
		<scroll-view style="width: 100%;height: 100vh;" @scrolltolower="scrolltolower" scroll-y="true">
			<view class="header">
				<!-- <view class="header-left" @click="lineClick('0')" :class="{headerLeft:tabShow==='0'}">
					<image src="../../static/se-jin.jpg" mode=""></image>
					<view class="line">
						<span :class="{spanTab:tabShow==='0'}">佣金提现</span>
						<view class="lineTab" :class="{lineTabClass:tabShow==='0'}"></view>
					</view>
				</view> -->
				<view class="header-right" :class="{headerLeft:tabShow==='1'}">
					<image src="../../static//se-yong.jpg" mode=""></image>
					<view class="line">
						<span :class="{spanTab:tabShow==='1'}">提现记录</span>
						<view class="lineTab" :class="{lineTabClass:tabShow==='1'}"></view>
					</view>
				</view>
			</view>
			<!-- <view class="main" v-if="tabShow==='0'">
				<view class="money">
					<view class="total">
						<span>佣金总金额</span>
						<text>0.00</text>
					</view>
					<view class="add">
						<span>累计佣金</span>
						<text>0</text>
					</view>
				</view>
				<view class="card">
					<view class="total">
						<view class="top">
							<span>卡号佣金:</span> <span class="hot">0.00</span>
						</view>
						<view class="bottom">
							<span>秒返:</span> <span class="hot">0.00</span>
						</view>
					</view>
					<view class="add">
						<view class="top">
							<view class="small">
								立即提现
							</view>
						</view>
						<view class="bottom">
							<span>次月返:</span> <span class="hot">0.00</span>
						</view>
					</view>
				</view>
			</view> -->
			<view class="content">
				<view class="money">
					<view class="total">
						<span>佣金余额</span>
						<text>{{totalMoney.commissionBalance}}元</text>
					</view>
					<view class="add">
						<span>累计佣金</span>
						<text>{{totalMoney.commissionSum}}元</text>
					</view>
				</view>
				<view class="detail">
					<text>累计成功提现</text>
					<span>{{totalMoney.withdrawalSum}}元</span>
				</view>
				<view class="select">
					<view class="select-top">
						<view class="tabs">
							<view class="tab" v-for="(tab, index) in tabs" :key="index" @click="selectTab(tab.id)">
								<text class="tab-text" :class="{word:currentIndex == tab.id}">{{ tab.title }}</text>
								<view class="tab-marker" :class="{ 'active': currentIndex == tab.id }"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 列表 -->
				<view class="list">
					<view class="item" v-for="item in extractPoints" :key="item.userId">
						<view class="main">
							<view class="span">提现金额 :</view>
							<view class="detail-1">{{item.withdrawalAmount}}</view>
						</view>
						<view class="main">
							<view class="span">到账金额 :</view>
							<view class="detail-1">{{item.arriveAccountAmount}}</view>
						</view>
						<view class="main">
							<view class="span">提现时间 :</view>
							<view class="detail-1">{{item.createTime}}</view>
						</view>
						<view class="main">
							<view class="span">手续费率 :</view>
							<view class="detail-1">{{item.rate}}</view>
						</view>
						<view class="main">
							<view class="span">状态 :</view>
							<view class="detail-1">{{stateApi(item.state)}}</view>
						</view>
					</view>
				</view>
				<view class="grace-loading" v-if="isLoadAll">{{ bottomText }}</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		cash,
		cashDetail
	} from "@/apis/cash.js"
	export default {
		data() {
			return {
				tabShow: '1',
				tabs: [{
						title: '待审核',
						id: 0
					},
					{
						title: '待打款',
						id: 1
					},
					{
						title: '未通过',
						id: 2
					},
					{
						title: '已打款',
						id: 3
					}
				],
				currentIndex: 0,
				totalMoney: {},
				extractPoints: [],
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页显示的数量
				total: 0, // 总页数
				isLoadAll: true,
			}
		},
		computed: {
			bottomText() {
				if (this.extractPoints.length < this.total && this.extractPoints.length !== 0) {
					return "加载中..."
				} else {
					return "---没有更多数据---";
				}
			}
		},
		onShow() {
			cash({
					size: this.pageSize,
					current: this.currentPage,
					state: this.currentIndex
				})
				.then((res) => {
					this.extractPoints = res.data.records;
				})
			cashDetail().
			then(res => {
				if (res.code === 200) {
					this.totalMoney = res.data;
				}
			})
		},
		methods: {
			deviceAbnormalData() {
				//当list的长度刚好和total（总条数）一样，且list长度不为0的时候，说明，数据已经获取完毕，
				if (this.extractPoints.length == this.total && this.extractPoints.length != 0) {
					return;
				};
				this.currentPage = this.currentPage + 1;
				return cash({
						size: this.pageSize,
						current: this.currentPage,
						state: this.currentIndex
					})
					.then(res => {
						const {
							total,
							records
						} = res.data;
						if (this.extractPoints) {
							this.extractPoints = [...this.extractPoints, ...records];
						} else {
							this.extractPoints = [...records];
						}
						this.total = total;
					})
			},
			scrolltolower() {
				console.log('zhxing')
				this.deviceAbnormalData();
			},
			stateApi(val) {
				if (val === '0') {
					return '待审核'
				} else if (val === '1') {
					return '审核通过待打款'
				} else if (val === '2') {
					return '未通过'
				} else if (val === '3') {
					return '已打款'
				}
			},
			// lineClick(val) {
			// 	this.tabShow = val;
			// },
			selectTab(index) {
				this.currentIndex = index;
				this.currentPage = 1;
				cash({
						size: this.pageSize,
						current: this.currentPage,
						state: this.currentIndex
					})
					.then((res) => {
						this.extractPoints = res.data.records;
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;
		overflow: hidden;

		.header {
			width: 100%;
			height: 100rpx;
			background-color: #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;

			// .header-left,
			.header-right {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: bolder;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 15rpx;
				}

				.line {
					display: flex;
					flex-direction: column;
					align-items: center;

					.lineTab {
						width: 50rpx;
						height: 1rpx;
						border: 0.3rpx;
					}

					.lineTabClass {
						border: 0.3rpx solid #FD906B;
					}

					span {
						margin-bottom: 9rpx;
					}

					.spanTab {
						color: #FD906B;
					}
				}
			}

			.headerLeft {
				background-color: #FFFFFF;
			}
		}

		.content {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.money {
				width: 100%;
				height: 150rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 16rpx;
				display: flex;
				margin-bottom: 30rpx;

				.total,
				.add {
					height: 100%;
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					text {
						color: #F81C17;
						font-weight: bolder;
					}
				}
			}

			.card {
				width: 100%;
				height: 220rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 16rpx;
				display: flex;

				.total,
				.add {
					height: 100%;
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					.top,
					.bottom {
						width: 100%;
						height: 50%;
						display: flex;
						align-items: center;
						justify-content: center;

						.hot {
							margin-left: 10rpx;
							font-weight: bolder;
							color: #F81C17;
						}

						.small {
							height: 45rpx;
							width: 130rpx;
							background-color: #FD906B;
							border-radius: 15rpx;
							text-align: center;
							line-height: 45rpx;
							font-size: 22rpx;
							color: white;
						}
					}
				}
			}
		}

		.content {
			width: 100%;
			height: 220rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.detail {
				width: 100%;
				height: 100%;
				background-color: white;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 25rpx;

				span {
					color: #F81C17;
				}
			}
		}
	}

	.select {
		height: 80rpx;
		width: 690rpx;
		// margin: 8rpx 20rpx 10rpx 20rpx;
		background-color: white;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;

		.select-top {
			height: 100%;
			width: 100%;

			.tabs {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100%;
				width: 100%;
			}

			.tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				width: 50%;
				overflow: hidden;
			}

			.tab-text {
				/* 文字样式 */
				color: gray;
			}

			.word {
				color: #FD906B;
				font-weight: 1000;
			}

			.wordData {
				color: #2D9FFD;
				font-weight: 1000;
			}

			.tab-marker {
				width: 0;
				height: 2px;
				background-color: #FD906B;
				/* 标记颜色 */
				transition: width 0.4s ease;
				/* 动画效果 */
				margin-top: 10rpx;
			}

			.tab-marker.active {
				width: 20%;

			}

			.tab-text-class {
				width: 0;
				height: 2px;
				// background-color: #2D9FFD;
				/* 标记颜色 */
				transition: width 0.4s ease;
				/* 动画效果 */
				margin-top: 10rpx;
			}

			.activeClass {
				width: 30%;
				height: 2px;
				background-color: #2D9FFD;
				/* 标记颜色 */
				transition: width 0.4s ease;
				/* 动画效果 */
				margin-top: 10rpx;
			}
		}
	}

	.list {
		width: 100%;

		.item {
			width: 100%;
			height: 360rpx;
			background-color: white;
			border-radius: 30rpx;
			padding: 60rpx;
			box-sizing: border-box;
			margin-bottom: 25rpx;

			.main {
				width: 100%;
				height: 50rpx;
				display: flex;
				align-items: center;

				.span {
					width: 35%;
					height: 100%;
					line-height: 50rpx;
					// margin-right: 30rpx;
				}

				.detail-1 {
					height: 100%;
					line-height: 50rpx;
				}
			}
		}
	}

	.grace-loading {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: bold;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
</style>